<template>
  <div class="main">
    <MyHeaderVue title="韩枫爱偷懒的购物车"></MyHeaderVue>
    <MyGoodsVue v-for="item in list" :key="item.goods_id" :arr="item"></MyGoodsVue>
    <MyFooterVue :arr="list"></MyFooterVue>
  </div>
</template>

<script>
import axios from 'axios'
import 'bootstrap/dist/css/bootstrap.css'

import MyHeaderVue from './components/MyHeader.vue';
import MyGoodsVue from './components/MyGoods.vue';
import MyFooterVue from './components/MyFooter.vue';
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const { data: res } = await axios.get('https://applet-base-api-t.itheima.net/api/cart')
      console.log(res);

      this.list = res.list
    }
  },
  components: {
    MyHeaderVue,
    MyGoodsVue,
    MyFooterVue,
  }
}
</script>

<style>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>